<template>
  <div class="rideorders-content">
    <div class="jiushibox">
      <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
        <div class="orderslist" v-for="(item,index) in items" :key="index" finished-text="没有更多了">
          <div class="ordersimgbox">
            <img :src="item.dinlogo" class="orderimg">
          </div>
          <span class="ordertp peisonging" v-if="item.type == 1">配送中</span>
          <span class="ordertp peisonged" v-if="item.type == 2">已完成</span>
          <span style="color:#f44" class="ordertp peisonged" v-if="item.type == 0">待取货</span>
          <h1 class="shopname">{{ item.productName }}</h1>
          <p>接单时间：{{ item.getTime }}</p>
          <p>约定送达时间：{{ item.endTime }}</p>
          <p>前往地址：{{ item.productAddress }} </p>
          <p>联系电话：{{ item.phone?item.phone.substr(0,3)+"*****"+item.phone.substr(item.phone.length-4):'未知' }}</p>
          <p>送货地址：{{ item.shopAddress }}</p>
          <p>联系电话：{{ item.shopPhone?item.shopPhone.substr(0,3)+"*****"+item.shopPhone.substr(item.shopPhone.length-4):'未知' }}</p>
          <p v-if="item.xingxing">用户评价：{{ item.xingxing }}星</p>
        </div>
      <!-- </van-list> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
      ],
      loading: false,
      finished: false
    };
  },
  beforeCreate: function() {
    //创建前
  },
  created: function() {
    //创建后
    this.Suk_getlist()
  },
  beforeMount: function() {
    //挂载前
  },
  mounted: function() {
    //挂载后
  },
  beforeUpdate: function() {
    //更新前
  },
  update: function() {
    //更新后
  },
  methods: {
    Suk_getlist() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        rinId:localStorage.getItem('userid')
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/ridingOrder/myOrderLists", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              that.items = res.data.data.list
              console.log(res.data);
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    }
    // onLoad() {
    //   // 异步更新数据
    //   setTimeout(() => {
    //     for (let i = 0; i < 1; i++) {
    //       this.items.push(this.items.length);
    //     }
    //     // 加载状态结束
    //     this.loading = false;
    //     // 数据全部加载完成
    //     if (this.items.length >= this.items.length/2) {
    //       this.finished = true;
    //     }
    //   }, 500);
    // }
  }
};
</script>
<style lang="scss" scoped>
.rideorders-content {
  font-size: 0.3rem;
}
.jiushibox {
  width: 90%;
  margin: 0 auto;
}
.ordersimgbox {
  display: inline-block;
  width: 2.5rem;
  height: 2rem;
  float: left;
  .orderimg {
    width: 100%;
    height: 100%;
  }
}
.shopname {
  text-indent: 0.2rem;

  font-size: 0.4rem;
  font-weight: 600;
  width: 7rem;
  color: #000;
  display: inline-block;
}
.orderslist {
  margin-top: 0.3rem;
  border-bottom: 1px solid #f4f4f4;
  p {
    display: inline-block;
    line-height: 0.74rem;
    text-indent: 0.2rem;
  }
}
.ordertp {
  position: absolute;
  right: 5%;
}
.peisonging {
  color: rgb(65, 144, 255);
}
.peisonged {
  color: rgb(255, 153, 16);
}
</style>
